<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  html,
  body,
  #root {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  #root {
    display: flex;
  }
  div.menu {
    width: 200px;
    height: 100%;
    background: #2d3a4b;
    transition: all linear 0.3s;
  }
  div.main {
    flex: 1;
    background: #fff;
  }
  div.top {
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: rgba(128, 128, 128, 0.7);
    user-select: none;
    cursor: pointer;
    margin-bottom: 30px;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
    display: flex;
  }
  div.top .iconfont{
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 25px !important;
    color: #000;
    margin-right: 10px;
  }
  div.top span:nth-of-type(1) {
    font-weight: bold;
    color: #000;
  }
  ul {
    list-style: none;
    width: 100%;
    height: 400px;
    cursor: pointer;
    user-select: none;
  }
  li {
    width: 100%;
    height: 50px;
    color: #ccc;
    font-size: 16px;
    line-height: 50px;
    padding-left: 20px;
  }
  li:hover {
    background: rgba(30, 42, 55);
  }
  div.content{
    width: 100%;
    height: 100%;
  }
  div h1 {
    width: 90%;
    margin: auto;
    background: #fff;
    padding: 200px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border: 1px solid #ebeef5;
  }
</style>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3278972_ymyp3wcs99r.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" />
<link rel="stylesheet" href="./transition.css">
<link rel="stylesheet" href="./font/iconfont.css">
<div id="root">
  <div class="menu" :style="{width: menuWidth + 'px'}">
    <ul>
      <li @click="who='index'"><i class="iconfont icon-yingyongzhongxin"></i>&emsp;{{ menuWidth===200 ? '后台首页' : '' }}</li>
      <li @click="who='classify'"><i class="iconfont icon-yingyongzhongxin"></i>&emsp;{{ menuWidth===200 ? '商品分类' : '' }}</li>
      <li @click="who='standards'"><i class="iconfont icon-yingyongzhongxin"></i>&emsp;{{ menuWidth===200 ? '商品规格' : '' }}</li>
      <li @click="who='goods'"><i class="iconfont icon-yingyongzhongxin"></i>&emsp;{{ menuWidth===200 ? '商品管理' : '' }}</li>
      <li @click="who='orders'"><i class="iconfont icon-yingyongzhongxin"></i>&emsp;{{ menuWidth===200 ? '订单管理' : '' }}</li>
      <li @click="who='users'"><i class="iconfont icon-yingyongzhongxin"></i>&emsp;{{ menuWidth===200 ? '用户管理' : '' }}</li>
      <li @click="who='roles'"><i class="iconfont icon-yingyongzhongxin"></i>&emsp;{{ menuWidth===200 ? '角色管理' : '' }}</li>
      <li @click="who='power'"><i class="iconfont icon-yingyongzhongxin"></i>&emsp;{{ menuWidth===200 ? '权限管理' : '' }}</li>
    </ul>
  </div>
  <div class="main">
    <div class="top">
      <i :class="['iconfont',menuWidth===200 ? 'icon-shouqicaidan' : 'icon-zhankaicaidan']" @click="changeMenuWidthFn"></i>
      <span>首页</span>&ensp;&gt;&ensp;
      <!-- 
        <span>后台首页</span>
        &ensp;&gt;&ensp;
        <span>欢迎页</span> 
      -->

      <!-- <transition
        appear
        enter-active-class="animated fadeInRight"
      > -->
      <transition
        appear
        name="breadcrumb"
      >
        <span
          v-for="item in [
            {menu1:'后台首页',menu2:'欢迎页',who:'index'},
            {menu1:'商品分类',menu2:'列表',who:'classify'},
            {menu1:'商品规格',menu2:'列表',who:'standards'},
            {menu1:'商品管理',menu2:'列表',who:'goods'},
            {menu1:'订单管理',menu2:'列表',who:'orders'},
            {menu1:'用户管理',menu2:'列表',who:'users'},
            {menu1:'角色管理',menu2:'列表',who:'roles'},
            {menu1:'权限管理',menu2:'列表',who:'power'},
          ]"

          :key="item.who"

          v-if="item.who === who"

          style="display:block;"
        >
          {{ item.menu1 }}&ensp;&gt;&ensp;{{ item.menu2 }}
        </span>
      </transition>

    </div>

    <!--  
      同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式
      in-out：新元素先进行过渡，完成之后当前元素过渡离开。
      out-in：当前元素先进行过渡，完成之后新元素过渡进入。
    -->
    <div class="content">
            
        <!-- <transition
          appear
          enter-active-class="animated fadeInRight"

          mode="out-in"   
        >
          <component :is="who"></component>
        </transition> -->
     
      <transition
        appear
        mode="out-in"    
        name="breadcrumb"
      >
        <component :is="who"></component>
      </transition>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component("index", { template: `<h1>后台首页内容</h1>` });
  Vue.component("classify", { template: `<h1>商品分类内容</h1>` });
  Vue.component("standards", { template: `<h1>商品规格内容</h1>` });
  Vue.component("goods", { template: `<h1>商品管理内容</h1>` });
  Vue.component("orders", { template: `<h1>订单管理内容</h1>` });
  Vue.component("users", { template: `<h1>用户管理内容</h1>` });
  Vue.component("roles", { template: `<h1>角色管理内容</h1>` });
  Vue.component("power", { template: `<h1>权限管理内容</h1>` });

  const vm = new Vue({
    el: "#root",
    data: {
      who: "index",
      menuWidth:200,
    },
    methods:{
      changeMenuWidthFn(){
        this.menuWidth = this.menuWidth===200 ? 64 : 200
      }
    }
  });
</script>
